<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport"
		content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta content="telephone=no" name="format-detection" />
	<!-- 留作将来统一添加 -->
	<TEMPLATE>${TEMPLATE}</TEMPLATE>
	<title>来自同学的卡拉OK</title>
	<link rel="stylesheet" type="text/css" href="../../css/api.css">
	<link rel="stylesheet" type="text/css" href="../../css/index.css">
	<link rel="stylesheet" type="text/css" href="../../css/data-flex.min.css">
	<style type="text/css">
		body {
			background: rgba(255, 255, 255, 1);
		}

		.row {
			margin: 15px;
		}

		.name {
			font-size:15px;
			font-weight:400;
			color:rgba(25,25,25,1);
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		.student {
			font-size:12px;
			font-weight:400;
			color:rgba(128,128,128,1);
			margin-top: 10px;
		}

		.icon {
			width: 24px;
			min-width: 24px;
			height: 25px;
			margin-left: 20px;
		}
	</style>
</head>

<body>
	<div class="vueApp" v-cloak>
		<div class="row" v-for="item,index in listData" data-flex="main:justify cross:center" @click="setValue(index)">
			<div data-flex-box="1">
				<div class="name">{{ item.dubName }}</div>
				<div class="student">来自: {{ item.nickName }}</div>
			</div>
			<div class="icon">
				<!-- <img :src="playIndex === index ? '../../image/ui/pause_4.png' : '../../image/ui/play_8.png'" alt=""> -->
                <img src="../../image/ui/play_8.png" alt="">
			</div>
		</div>
	</div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/service/service-tool.js"></script>
<script type="text/javascript" src="../../script/service/service-app.js"></script>
<script type="text/javascript" src="../../script/service/service-user.js"></script>
<script type="text/javascript" src="../../script/service/service-logic.js"></script>
<script type="text/javascript" src="../../script/jquery.min.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript">
	// html 的引号一律为双引号(""),js 为单引号('')
	var USER, $S, vm, pageParam;
	apiready = function () {
		$S = SERVICE();
		USER = USER();
		console.log(JSON.stringify(api.pageParam) + '=====pageParam');
        pageParam = api.pageParam;
		fnInit();
	};
	
	// 初始化
	function fnInit() {
		vm = new Vue({
			el: '.vueApp',
			data: {
                pageNo: 1,
                pageSize: 10,
                playIndex: '',
                listData: []
            },
            methods: {
                setValue: function(index) {
                    var url = vm.listData[index].dubAudioUrl;
                    fnOpenPublicWin(vm.listData[index].dubName, 'course1/play_video', {
                        url: url,
                        isSlidBack: false
                    });
                }
            }
        });
        load();
    }
    
    function load() {
        getPageData('headerRefreshing');
        fnAddHeaderRefreshingEvent(function() { //设置下拉刷新
            getPageData('headerRefreshing');
        });

        fnAddFooterLoadingEvent(function() { // 设置上拉加载
            getPageData('load');
        });

    }

    function getPageData(sign) {
        if(sign == 'headerRefreshing') {
            vm.pageNo = 1;
        } else {
            vm.pageNo ++;
        }
        var url = 'question/findClassesDataShareList';
        var params = {
            'pageNo': vm.pageNo,
            'pageSize': vm.pageSize,
            'clsClassesId': pageParam.clsClassesId
        };
        var callback = function(data) {
            if(vm.pageNo == '1') {
                vm.listData = [];
            };
            api.refreshHeaderLoadDone();
            vm.listData = vm.listData.concat(data.listData);
            // status 为200时,只返回data
        };
        POST(url, params, callback);
    }
</script>

</html>